<!-- @format -->

<template>
  <UseSpace title="父组件 子组件通过yup校验实现联动">
    <form @submit="onSubmit">
      <InputText name="firstName" />
      <InputText name="lastName" />
      <InputText name="email" type="email" />
      <InputText name="password" type="password" />
      <InputText name="passwordConfirm" type="password" />

      <button>Submit</button>
    </form>
  </UseSpace>
</template>

<script setup>
  import { useForm } from 'vee-validate'
  import * as yup from 'yup'
  import InputText from './InputText.vue'

  const { handleSubmit } = useForm({
    validationSchema: yup.object({
      firstName: yup.string().required(),
      lastName: yup.string().required(),
      email: yup.string().required().email(),
      password: yup.string().required().min(6),
      passwordConfirm: yup
        .string()
        .required()
        .min(6)
        .oneOf([yup.ref('password')]),
    }),
  })

  const onSubmit = handleSubmit((values) => {
    alert(JSON.stringify(values, null, 2))
  })
</script>
